/**
 * Created by dio on 2017/2/27 0027.
 */
import React, {Component} from "react";
import {
    ActivityIndicator,
    Alert,
    Image,
    InteractionManager,
    Navigator,
    Platform,
    ScrollView,
    Text,
    TouchableOpacity,
    View,
    ViewPagerAndroid
} from "react-native";
import ModuleButton from "../module/ModuleButton";
import CarDetail from "./components/CarDetail";
import chjStyle from "../../CustomStyle";
import Util from "../Util";
import Swiper from "react-native-swiper";
import Toast from "react-native-root-toast";
import {connect} from "react-redux";
import * as homePageAction from "../../redux/action/homePage";

class AuctionDetail extends Component {

    constructor(props) {
        super(props);

        this.state = {
            isLoading: true
        };
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            this.requestAuctionDetail();
        });
    }

    // this.setState({
    //     isLoading:false
    // });

    requestAuctionDetail() {
        const params = {
            auctionid: this.props.data.auctionid
        };
        Util.postServer('user/queryauctioninfo', params, (result) => {
            this.onRequestDetailSuccess(result)
        }, (msg) => this.onRequestDetailFailed(msg));
    }

    onRequestDetailSuccess(result) {
        if (!result.data.auctioninfo) {
            Toast.show('竞拍已结束');
            this.props.navigator.pop();
            return;
        }


        this.allAttrData = result.data;

        // 如果list长度为0时加一个占位数据显示 ‘当前无竞拍记录’
        if (this.allAttrData.auctioninfo.auctionpricelist.length === 0) {
            this.allAttrData.auctioninfo.auctionpricelist.push({
                isNoRecord: true
            });
        }

        this.setState({
            isLoading: false
        });
    }

    onRequestDetailFailed(msg) {
        Alert.alert('错误', msg);
    }

    /**

     * */
    render() {
        if (this.state.isLoading) {
            return (
                <ActivityIndicator
                    animating={true}
                    style={{alignItems: 'center', justifyContent: 'center', height: chjStyle.height}}
                    size="large"/>);
        }

        let auctionStr = '马上出价';
        let auctionColor = '#FF7200';
        let auctionEnable = true;
        if (this.props.data.isauction === 0) {
            auctionStr = '还未开始';
            auctionEnable = false;
            auctionColor = '#555';
        }
        else if (this.props.data.isauction === 2) {
            auctionStr = '已经结束';
            auctionEnable = false;
            auctionColor = '#555';
        }

        return (<View style={chjStyle.mainContainer}>
            <ScrollView style={chjStyle.secondaryContainer}>
                {
                    this.renderImageSwiper()
                }
                {
                    this.renderCarBasicinfo()
                }
                <Text style={[chjStyle.baseText, {
                    color: '#fff',
                    fontSize: chjStyle.getActualFontSize(32),
                    paddingTop: chjStyle.getActualSizeInVertical(16),
                    paddingLeft: chjStyle.getActualSizeInHorizontal(30),
                    width: chjStyle.getActualSizeInHorizontal(750),
                    height: chjStyle.getActualSizeInVertical(80),
                    backgroundColor: '#FFC000'
                }]}>竞拍记录</Text>
                {
                    this.allAttrData.auctioninfo.auctionpricelist.map((item, i) => this.renderAuctionRecord(item, i))
                }
            </ScrollView>

            <TouchableOpacity onPress={() => this.props.navigator.pop()}
                              style={{
                                  backgroundColor: '#00000000',
                                  position: 'absolute',
                                  left: chjStyle.getActualSizeInVertical(20),
                                  top: chjStyle.getActualSizeInVertical(72),
                                  width: chjStyle.getActualSizeInHorizontal(72),
                                  height: chjStyle.getActualSizeInVertical(72)
                              }}>
                <Image source={require('../../../img/back.png')}
                       style={{
                           width: chjStyle.getActualSizeInHorizontal(72),
                           height: chjStyle.getActualSizeInVertical(72)
                       }}/>
            </TouchableOpacity>

            <ModuleButton onClickedListener={() => this.viewCarDetail()}
                          buttonStyle={{
                              backgroundColor: '#FFC93F',
                              position: 'absolute',
                              left: 0,
                              top: chjStyle.getActualSizeInVertical(1206),
                              width: chjStyle.getActualSizeInHorizontal(375),
                              height: chjStyle.getActualSizeInVertical(128)
                          }}
                          textStyle={{
                              color: '#fff',
                              width: chjStyle.getActualSizeInHorizontal(375),
                              top: chjStyle.getActualSizeInVertical(40),
                              fontSize: chjStyle.getActualFontSize(36),
                              textAlign: 'center'
                          }}
                          text="车辆详情"
            />
            <ModuleButton onClickedListener={() => {
                if (auctionEnable) this.viewAuctionDialog()
            }}
                          buttonStyle={{
                              backgroundColor: auctionColor,
                              position: 'absolute',
                              left: chjStyle.getActualSizeInHorizontal(375),
                              top: chjStyle.getActualSizeInVertical(1206),
                              width: chjStyle.getActualSizeInHorizontal(375),
                              height: chjStyle.getActualSizeInVertical(128)
                          }}
                          textStyle={{
                              color: '#fff',
                              width: chjStyle.getActualSizeInHorizontal(375),
                              top: chjStyle.getActualSizeInVertical(40),
                              fontSize: chjStyle.getActualFontSize(36),
                              textAlign: 'center'
                          }}
                          text={auctionStr}
            />
        </View>);
    }

    viewCarDetail() {
        this.props.navigator.push(
            {
                title: 'CarDetail',
                component: CarDetail,
                data: this.allAttrData.auctioninfo,
                hidePhone: true,
                configure: {
                    ...Navigator.SceneConfigs.HorizontalSwipeJump,
                    gestures: {
                        pop: {}
                    }
                }
            }
        );
    }

    viewAuctionDialog() {
        this.props.rootview.onSelectionListener = ((value) => {
            // 黑科技，，，用完记得设置为null
            this.props.rootview.onSelectionListener = null;

            this.requestDoAuction(value);
        });

        const currentPrice = parseFloat(this.allAttrData.auctioninfo.lastauctionprice) * 10000;
        this.props.setDialog(true, [
            {name: '加价200元(' + (currentPrice + 200).toFixed(0) + '元)', value: (currentPrice + 200).toFixed(0)},
            {name: '加价300元(' + (currentPrice + 300).toFixed(0) + '元)', value: (currentPrice + 300).toFixed(0)},
            {name: '加价500元(' + (currentPrice + 500).toFixed(0) + '元)', value: (currentPrice + 500).toFixed(0)},
            {name: '加价1000元(' + (currentPrice + 1000).toFixed(0) + '元)', value: (currentPrice + 1000).toFixed(0)},
            {name: '加价2000元(' + (currentPrice + 2000).toFixed(0) + '元)', value: (currentPrice + 2000).toFixed(0)},
        ]);
    }

    requestDoAuction(value) {
        const user = Util.getUser();
        const params = {
            token: user.token,
            userid: user.id,
            auctionid: this.props.data.auctionid,
            auctionprice: value
        };
        Util.postServer('user/addauctionprice', params, (result) => this.onDoAuctionSuccess(result), (msg) => this.onDoAuctionFailed(msg));
    }

    onDoAuctionSuccess(result) {

        if (result.status === '0') {
            var mark = result.data.mark;

            if (mark === '003') {
                Alert.alert('错误', '竞拍价必须大于当前拍价');
            }
            else if (mark === '004') {
                Alert.alert('错误', '竞拍结束!');
            }
            else if (mark === '006') {
                Alert.alert('错误', '系统繁忙!');
            } else if (mark === '005') {
            }

            this.allAttrData.auctioninfo.lastauctionprice = result.data.lastprice;
            this.allAttrData.auctioninfo.auctionpricelist = result.data.pricelist;

            this.setState({
                isLoading: false
            });
            // this.requestAuctionStatus();
        }
        else {
            Alert.alert('错误', result.msg);
        }
    }

    onDoAuctionFailed(msg) {
        if (Platform.OS === 'android')
            Alert.alert('错误', msg);
        else
            Toast.show("竞拍失败：" + msg, {duration: Toast.durations.SHORT, position: Toast.positions.CENTER});
    }

    requestAuctionStatus() {
        const user = Util.getUser();
        const params = {
            token: user.token,
            userid: user.id,
            auctionid: this.props.data.auctionid
        };
        Util.postServer('user/queryauctionstatus', params, (result) => this.onAuctionStatusSuccess(result), (msg) => this.onAuctionStatusFailed(msg));
    }

    onAuctionStatusSuccess(result) {

    }

    onAuctionStatusFailed(msg) {
    }

    renderImageSwiper() {
        if (Platform.OS === 'android') {
            return (<ViewPagerAndroid
                style={{
                    width: chjStyle.getActualSizeInHorizontal(750),
                    height: chjStyle.getActualSizeInVertical(500),
                }}
            >
                {
                    this.allAttrData.auctioninfo.imglist.map((item, i) => this.renderImage(item, i))
                }
            </ViewPagerAndroid>);
        }
        else {
            return (<Swiper
                height={chjStyle.getActualSizeInVertical(500)}
                onSlideChange={this.onSlideChangeHandle.bind(this)}
            >
                {
                    this.allAttrData.auctioninfo.imglist.map((item, i) => this.renderImage(item, i))
                }
            </Swiper>);
        }
    }

    onSlideChangeHandle() {
    }

    renderImage(item, i) {
        return (
            <View style={{
                width: chjStyle.getActualSizeInHorizontal(750),
                height: chjStyle.getActualSizeInVertical(500)
            }}>
                <TouchableOpacity
                    activeOpacity={1}
                    style={{
                        width: chjStyle.getActualSizeInHorizontal(750),
                        height: chjStyle.getActualSizeInVertical(500)
                    }}>
                    <Image style={{
                        backgroundColor: '#999',
                        width: chjStyle.getActualSizeInHorizontal(750),
                        height: chjStyle.getActualSizeInVertical(500)
                    }}
                           resizeMode='stretch'
                           source={{uri: Util.ImgMiddleServicePath + item}}
                    />
                </TouchableOpacity>
            </View>
        );
    }

    renderCarBasicinfo() {
        return <View
            style={{height: chjStyle.getActualSizeInVertical(350), width: chjStyle.getActualSizeInHorizontal(750)}}>
            <Text style={[chjStyle.baseText, {
                color: '#999',
                position: 'absolute',
                fontSize: chjStyle.getActualFontSize(20),
                left: chjStyle.getActualSizeInHorizontal(20),
                top: chjStyle.getActualSizeInVertical(6),
                width: chjStyle.getActualSizeInHorizontal(710),
                height: chjStyle.getActualSizeInVertical(120),
            }]}>
                车辆编号:{this.allAttrData.auctioninfo.carid}
            </Text>

            <Text
                numberOfLines={2}
                style={[chjStyle.baseText, {
                    color: '#333',
                    position: 'absolute',
                    fontSize: chjStyle.getActualFontSize(35),
                    left: chjStyle.getActualSizeInHorizontal(20),
                    top: chjStyle.getActualSizeInVertical(30),
                    width: chjStyle.getActualSizeInHorizontal(710),
                    height: chjStyle.getActualSizeInVertical(120),
                }]}>
                {this.allAttrData.auctioninfo.carbrand + ' ' + this.allAttrData.auctioninfo.carseries + ' ' + this.allAttrData.auctioninfo.carmodel}
            </Text>

            <Text style={[chjStyle.baseText, {
                color: '#FF5534',
                position: 'absolute',
                fontSize: chjStyle.getActualFontSize(32),
                left: chjStyle.getActualSizeInHorizontal(20),
                top: chjStyle.getActualSizeInVertical(148),
                width: chjStyle.getActualSizeInHorizontal(710),
            }]}>
                当前价:
            </Text>

            <Text style={[chjStyle.baseText, {
                color: '#FF5534',
                position: 'absolute',
                fontSize: chjStyle.getActualFontSize(60),
                left: chjStyle.getActualSizeInHorizontal(128),
                top: chjStyle.getActualSizeInVertical(120),
                width: chjStyle.getActualSizeInHorizontal(710),
            }]}>
                {this.allAttrData.auctioninfo.lastauctionprice}万
            </Text>

            <View style={{
                position: 'absolute',
                left: chjStyle.getActualSizeInHorizontal(0),
                top: chjStyle.getActualSizeInVertical(220),
                width: chjStyle.getActualSizeInHorizontal(750),
                height: chjStyle.getActualSizeInVertical(128),
            }}>
                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        textAlign: 'center',
                        width: chjStyle.getActualSizeInHorizontal(250),
                        left: chjStyle.getActualSizeInHorizontal(0),
                        top: chjStyle.getActualSizeInVertical(10),
                        fontSize: chjStyle.getActualFontSize(32),
                        color: '#333'
                    }]}>{parseFloat(this.allAttrData.auctioninfo.travelkilometer).toFixed(1)}万公里</Text>
                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        textAlign: 'center',
                        width: chjStyle.getActualSizeInHorizontal(250),
                        left: chjStyle.getActualSizeInHorizontal(0),
                        top: chjStyle.getActualSizeInVertical(60),
                        fontSize: chjStyle.getActualFontSize(26),
                        color: '#aaa'
                    }]}>里程数</Text>

                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        textAlign: 'center',
                        width: chjStyle.getActualSizeInHorizontal(250),
                        left: chjStyle.getActualSizeInHorizontal(250),
                        top: chjStyle.getActualSizeInVertical(10),
                        fontSize: chjStyle.getActualFontSize(32),
                        color: '#333'
                    }]}>{Util.calculateDate(this.allAttrData.auctioninfo.firstrecorddate)}</Text>
                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        textAlign: 'center',
                        width: chjStyle.getActualSizeInHorizontal(250),
                        left: chjStyle.getActualSizeInHorizontal(250),
                        top: chjStyle.getActualSizeInVertical(60),
                        fontSize: chjStyle.getActualFontSize(26),
                        color: '#aaa'
                    }]}>{this.allAttrData.auctioninfo.firstrecorddate}上牌</Text>

                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        textAlign: 'center',
                        width: chjStyle.getActualSizeInHorizontal(250),
                        left: chjStyle.getActualSizeInHorizontal(500),
                        top: chjStyle.getActualSizeInVertical(10),
                        fontSize: chjStyle.getActualFontSize(32),
                        color: '#333'
                    }]}>{this.allAttrData.auctioninfo.carterritorial}</Text>
                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        textAlign: 'center',
                        width: chjStyle.getActualSizeInHorizontal(250),
                        left: chjStyle.getActualSizeInHorizontal(500),
                        top: chjStyle.getActualSizeInVertical(60),
                        fontSize: chjStyle.getActualFontSize(26),
                        color: '#aaa'
                    }]}>车牌所在地</Text>
            </View>
        </View>
    }

    renderAuctionRecord(item, i) {
        if (item.isNoRecord) {
            return (<Text style={[chjStyle.baseText, {
                    color: '#ccc',
                    textAlign: 'center',
                    fontSize: chjStyle.getActualFontSize(32),
                    paddingTop: chjStyle.getActualSizeInVertical(16),
                    paddingLeft: chjStyle.getActualSizeInHorizontal(30),
                    width: chjStyle.getActualSizeInHorizontal(750),
                    height: chjStyle.getActualSizeInVertical(80),
                }]}>还没有竞拍记录哦...</Text>
            );
        }

        return (
            <View style={{
                height: chjStyle.getActualSizeInVertical(80),
                width: chjStyle.getActualSizeInHorizontal(750),
                borderBottomWidth: 1,
                borderBottomColor: '#ccc'
            }}>
                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        color: '#ccc',
                        fontWeight: 'bold',
                        fontSize: chjStyle.getActualFontSize(30),
                        left: chjStyle.getActualSizeInHorizontal(40),
                        top: chjStyle.getActualSizeInVertical(20),
                        width: chjStyle.getActualSizeInHorizontal(375)
                    }]}
                >第{i + 1}高价</Text>

                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        color: '#FF7200',
                        fontSize: chjStyle.getActualFontSize(30),
                        left: chjStyle.getActualSizeInHorizontal(200),
                        top: chjStyle.getActualSizeInVertical(20),
                        width: chjStyle.getActualSizeInHorizontal(375)
                    }]}
                >出价{item.auctionprice / 10000}万</Text>

                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        color: '#333',
                        textAlign: 'right',
                        fontSize: chjStyle.getActualFontSize(30),
                        right: chjStyle.getActualSizeInHorizontal(30),
                        top: chjStyle.getActualSizeInVertical(20),
                        width: chjStyle.getActualSizeInHorizontal(375)
                    }]}
                >{item.createdtime}</Text>
            </View>
        );
    }
}

const mapStateToProps = (state) => {
    return {};
};

const mapDispatchToProps = (dispatch) => {
    return {
        setDialog: (visible, itemList) => {
            dispatch(homePageAction.setSelecDialog(visible, itemList));
        },
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(AuctionDetail);
